<!DOCTYPE html>
<html>
  <head>
    <link href="./build/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
  </head>
  <body>
    <!-- example -->
    <div id="example"></div>

    <!-- refactoring the form to be data driven -->
    <!-- todo -->

    <!-- controlled components – a simple form -->
    <script type="text/babel">
      var TextBox = React.createClass({
        render() {
          return (
            <input type="text"
              className="form-control"
              name={this.props.name}
              value={this.props.value}
              onChange={this.props.onChange}
            />
          )
        }
      })

      var ExampleForm = React.createClass({
        // contains all state for this application
        // can consider the higher in this application hierarchy then owner the state
        getInitialState() {
          return {
            form: {
              firstName: 'safari',
              lastName: 'shi',
            }
          }
        },

        render() {
          var self = this
          return (
            <from onSubmit={this.onSubmit}>
            {Object.keys(this.state.form).map(function(key) {
              return (
                <TextBox key={key} name={key} value={self.state.form[key]} onChange={self.onChange} />
              )
            })}
            <button className="btn btn-success" type="submit" onClick={this.onSubmit}>Submit</button>
            </from>
          )
        },

        onChange(e) {
          this.state.form[e.target.name] = e.target.value
          this.setState({ form: this.state.form })
        },

        onSubmit(event) {
          event.preventDefault()
          console.log('Form will submit. firstName:', this.state.form.firstName, 'lastName:', this.state.form.lastName)
        }
      })

      ReactDOM.render(
        <ExampleForm />,
        document.getElementById('example')
      )
    </script>

    <!-- <script type="text/babel">
      var ExampleForm = React.createClass({
        getInitialState() {
          return {
            message: 'read and write'
          }
        },

        getDefaultProps() {
          return {
            message: 'readonly'
          }
        },

        render() {
          return (
            <div>
              <input type="text" className="form-control" value={this.props.message} />
              <br />
              <input type="text" className="form-control" value={this.state.message} onChange={this.onChange} />
            </div>
          )
        },

        onChange(e) {
          console.log(e.target)
          console.log(typeof e.target)
          console.log(e.target.value)
          this.setState({ message: e.target.value })
        }
      })

      ReactDOM.render(
        <ExampleForm />,
        document.getElementById('example')
      )
    </script> -->

    <!-- mixin demo -->
    <!-- <script type="text/babel">
      var ReactMinin1 = {
        log(message) {
          console.log(message)
        },
        componentWillMount() {
          this.log('componentWillMount from ReactMinin1')
        }
      }

      var ReactMinin2 = {
        log(message) {
          console.log(message)
        },
        componentWillMount() {
          this.log('componentWillMount from ReactMinin2')
        }
      }

      var HelloMessage = React.createClass({
        mixins: [ReactMinin1, ReactMinin2],
        componentWillMount() {
          this.log('componentWillMount from HelloMessage')
        },
        render() {
          return (
            <h2>{this.props.message}</h2>
          )
        }
      })

      var Button = React.createClass({
        mixins: [ReactMinin2, ReactMinin1],
        componentWillMount() {
          this.log('componentWillMount from Button')
        },
        render() {
          return (
            <button onClick={this.clicked}>{this.props.text}</button>
          )
        },
        clicked() {
          this.log(this.props.text + ' clicked')
        }
      })

      ReactDOM.render(
        <HelloReact />,
        document.getElementById('example')
      )
    </script> -->

    <!-- dynamic components table example -->
    <!-- <script type="text/babel">
      var UserRow = React.createClass({
        render() {
          return (
            <tr>
              <td>{this.props.user.name}</td>
              <td>{this.props.user.email}</td>
            </tr>
          )
        }
      })

      var UserList = React.createClass({
        getInitialState() {
          return {
            users: [
              { id: 1, name: 'sshsfl', email: 'sshsfl@yeah.net' },
              { id: 2, name: 'safarishi', email: 'safarishi@rootant.com' },
              { id: 3, name: 'sshflgm', email: 'sshflgm@gmail.com' },
            ]
          }
        },
        render() {
          console.log(this.state.users)
          var users = this.state.users.map(function(user) {
            return <UserRow user={user} key={user.id} />
          })
          return (
            <table className="table">
              <thead>
                <tr>
                  <th>User Name</th>
                  <th>Email Address</th>
                </tr>
              </thead>
              <tbody>
                {users}
              </tbody>
            </table>
          )
        }
      })

      ReactDOM.render(
        <UserList />,
        document.getElementById('example')
      )
    </script> -->
  </body>
  </html>
